<template>
  <el-dialog
    title="选择打印格式"
    :visible.sync="dialogVisible"
    width="28%"
    :before-close="handleClose"
  >
    <div class="print-settings-container">
      <!-- 打印格式表格 -->
    

      
    </div>
	<!-- 打印设置选项 -->
	<div class="print-options">
	  <el-button @click="showPrinterSettings" size="small">设置打印机</el-button>
	  <el-button @click="showLocalFormatProperties" size="small">本地格式属性</el-button>
	  <!-- <el-checkbox v-model="closeAfterPrint" style="margin-left: 10px;">打印后关闭此窗口</el-checkbox> -->

    <span slot="footer" class="dialog-footer">
      <el-button @click="preview" size="small">预览</el-button>
      <el-button type="primary" @click="print" size="small">打印</el-button>
      <el-button @click="cancel" size="small">取消</el-button>
    </span>
	</div>
    <!-- 打印机设置对话框 -->
    <el-dialog
      title="设置打印机"
      :visible.sync="printerDialogVisible"
      width="28%"
      append-to-body
    >
      <el-radio-group v-model="printMethod">
        <el-radio label="browser">浏览器打印</el-radio>
        <el-radio label="loadp">Loadp插件打印</el-radio>
      </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="printerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPrinterSettings">确定</el-button>
      </span>
    </el-dialog>
  </el-dialog>
</template>

<script>
// import Loadp from 'loadp';

export default {
  name: 'PrintSettingsDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      printerDialogVisible: false,
      printMethod: 'browser', // 默认浏览器打印
      closeAfterPrint: true,
      currentPrintFormat: null,
      printFormats: [
        {
          rowNumber: '1',
          name: '西药房库存一览表',
          component: '默认打印组件'
        }
        // 可以添加更多打印格式
      ]
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
    }
  },
  methods: {
    handleClose(done) {
      this.$emit('update:visible', false);
      done();
    },
    handleCurrentChange(val) {
      this.currentPrintFormat = val;
    },
    showPrinterSettings() {
      this.printerDialogVisible = true;
    },
    showLocalFormatProperties() {
      this.$message.info('本地格式属性功能待实现');
    },
    confirmPrinterSettings() {
      this.printerDialogVisible = false;
      this.$message.success(`已选择${this.printMethod === 'browser' ? '浏览器打印' : 'Loadp插件打印'}`);
    },
    preview() {
      if (!this.currentPrintFormat) {
        this.$message.warning('请先选择打印格式');
        return;
      }

      if (this.printMethod === 'browser') {
        // 浏览器打印预览
        const printWindow = window.open('', '_blank');
        printWindow.document.write(`
          <html>
            <head>
              <title>${this.currentPrintFormat.name} - 预览</title>
              <style>
                body { font-family: Arial; margin: 20px; }
                h1 { color: #333; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                th { background-color: #f2f2f2; }
              </style>
            </head>
            <body>
              <h1>${this.currentPrintFormat.name}</h1>
              ${this.content}
            </body>
          </html>
        `);
        printWindow.document.close();
        printWindow.focus();
      } else {
        // Loadp插件预览
        Loadp.preview(this.content, {
          title: this.currentPrintFormat.name,
          style: '@page { size: A4; margin: 10mm; }'
        });
      }
    },
    print() {
      if (!this.currentPrintFormat) {
        this.$message.warning('请先选择打印格式');
        return;
      }

      if (this.printMethod === 'browser') {
        // 浏览器打印
        const printContent = `
          <html>
            <head>
              <title>${this.currentPrintFormat.name}</title>
              <style>
                body { font-family: Arial; margin: 20px; }
                h1 { color: #333; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                th { background-color: #f2f2f2; }
              </style>
            </head>
            <body>
              <h1>${this.currentPrintFormat.name}</h1>
              ${this.content}
            </body>
          </html>
        `;
        
        const printWindow = window.open('', '_blank');
        printWindow.document.write(printContent);
        printWindow.document.close();
        printWindow.print();
        
        if (this.closeAfterPrint) {
          printWindow.onafterprint = () => {
            printWindow.close();
            this.dialogVisible = false;
            this.$emit('update:visible', false);
          };
        } else {
          this.dialogVisible = false;
          this.$emit('update:visible', false);
        }
      } else {
        // Loadp插件打印
        Loadp.print(this.content, {
          style: '@page { size: A4; margin: 10mm; }'
        });
        
        if (this.closeAfterPrint) {
          this.dialogVisible = false;
          this.$emit('update:visible', false);
        }
      }
    },
    cancel() {
      this.dialogVisible = false;
      this.$emit('update:visible', false);
    }
  }
};
</script>

<style lang="less" scoped>
.print-settings-container {
  padding: 10px;
}

.print-component-cell {
  background-color: #409EFF;
  color: white;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
}

.print-options {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
</style>